<template>
  <van-row class="page-grade-list">
    <van-nav-bar left-text="返回" :title="assessType === $vo.AssessType.CORP + '' ? '公司考评列表' : '单位考评列表'" @click-left="$router.back()"/>
    <van-field v-if="operateType === $vo.OperateType.GRADE" readonly :border="false" label="部门评分情况" left-icon="bar-chart-o" input-align="right">
      <template #input>
        <van-row style="width: 100%">
          <van-col span="12">
            <span>考核问题：</span>
            <span>{{ problemTotal }}</span>
          </van-col>
          <van-col span="11" offset="1">
            <span>待评分：</span>
            <span>{{ gradeTotal }}</span>
          </van-col>
        </van-row>
      </template>
    </van-field>
    <panel-grade-filter :assessType="assessType" :operateType="operateType" @onQuery="doQuery"/>
    <van-empty v-if="showEmpty" description="无考核评分信息" />
    <van-row :style="operateType === $vo.OperateType.GRADE ? {marginBottom: '55px'} : {marginBottom: '0px'}">
      <card-grade-sketch
        v-for="(grade, index) in gradeList"
        :key="grade.id"
        :index="index"
        :grade="grade"
        @onClick="showGradeDetail"/>
      <van-loading v-if="listLoad" class="query-load" type="spinner" >努力加载中...</van-loading>
      <van-row v-if="!listFinished && gradeList.length >= condition.pageSize" @click="doGetGradeList" class="query-load">
        {{listError ? '载入失败，重新加载...' : '加载更多...'}}
      </van-row>
    </van-row>
    <van-row v-if="operateType === $vo.OperateType.GRADE" class="bottom-action-bar">
      <van-row class="bottom-action-item" @click="showGradeStat">
        <van-row class="btn-icon">
          <van-icon name="chart-trending-o" />
        </van-row>
        <van-row class="btn-text">
          {{assessType === $vo.AssessType.CORP + '' ? '科室' : '部门'}}评分情况统计
        </van-row>
      </van-row>
      <van-row class="bottom-action-item" @click="startSelectContact">
        <van-row class="btn-icon">
          <van-icon name="upgrade" />
        </van-row>
        <van-row class="btn-text">
          提交评分结果
        </van-row>
      </van-row>
    </van-row>
    <van-popup
      v-model="showPageGradeDetail"
      position="right"
      get-container="body"
      style="width: 100%; height: 100%; background-color: #F9F9F9">
      <page-grade-detail v-if="showPageGradeDetail" :grade="selectedGrade" :assessType="assessType" :operateType="operateType" @onCancel="showPageGradeDetail = false" @onConfirm="doConfirm"/>
    </van-popup>
    <van-popup
      v-model="showPageGradeStat"
      position="right"
      get-container="body"
      style="width: 100%; height: 100%; background-color: #F9F9F9">
      <page-grade-stat v-if="showPageGradeStat" :assessType="assessType"  @onCancel="showPageGradeStat = false"/>
    </van-popup>
    <van-popup
      v-model="showPageContact"
      position="right"
      get-container="body"
      style="width: 100%; height: 100%; background-color: #F9F9F9">
      <page-contact v-if="showPageContact" :receivers="[]" :parentPath="this.$route.query.bmmc != undefined ? this.$route.query.bmmc : $store.state.authInfo.currentDept.department_path" v-on:onCancel="showPageContact = false" v-on:onConfirm="endSelectContact"/>
    </van-popup>
  </van-row>
</template>

<script>
import PanelGradeFilter from '@/views/common/panel/PanelGradeFilter'
import CardGradeSketch from '@/views/common/card/CardGradeSketch'
import PageGradeDetail from '@/views/grade/PageGradeDetail'
import PageGradeStat from '@/views/grade/PageGradeStat'
import PageContact from '@/views/common/page/PageContact'
import { getGradeList, batchUpdateProblem } from '@/api/assess'

export default {
  name: 'PageGradeList',
  components: { PanelGradeFilter, CardGradeSketch, PageGradeDetail, PageGradeStat, PageContact },
  props: ['assessType', 'operateType'],
  data () {
    return {
      problemTotal: 0,
      gradeTotal: 0,
      showEmpty: false,
      showPageContact: false,
      listError: false,
      listLoad: false,
      listFinished: false,
      showPageGradeDetail: false,
      showPageGradeStat: false,
      condition: this.$vo.createCondition(),
      selectedGrade: this.$vo.createGrade(),
      gradeList: []
    }
  },
  mounted () {
    this.condition.user_id = this.$store.state.authInfo.user.userid
    this.condition.op = this.operateType
    this.condition.problem_type = this.assessType
    this.condition.department_path = this.$route.query.bmmc != undefined ? this.$route.query.bmmc : this.$store.state.authInfo.currentDept.department_path
    this.doGetGradeList()
  },
  methods: {
    doConfirm () {
      this.gradeList = []
      this.condition.pageNum = 1
      this.doGetGradeList()
      this.showPageGradeDetail = false
    },
    showGradeDetail (grade) {
      this.selectedGrade = grade
      this.showPageGradeDetail = true
    },
    showGradeStat () {
      this.showPageGradeStat = true
    },
    startSelectContact () {
      if (this.gradeTotal > 0) {
        this.$dialog.alert({
          title: '操作提示',  
          message: '请完成所有考评打分后再提交评分结果!'
        })
      } else {
        this.showPageContact = true
      }
    },
    endSelectContact (persons) {
      if (persons.length > 0) {
        this.showPageContact = false
        // 调用结果提交接口
        let submitObj = {}
        submitObj.op = 'batchCommit'
        submitObj.user_id = this.$store.state.authInfo.user.userid
        submitObj.department_path = this.$route.query.bmmc != undefined ? this.$route.query.bmmc : this.$store.state.authInfo.currentDept.department_path
        submitObj.check_type = this.assessType
        submitObj.refuse_reason = ''
        submitObj.receivers = persons
        batchUpdateProblem(submitObj).then(res => {
          let { data } = res
          if (data[this.$response.CODE] === this.$response.SUCCESS) {
            this.$toast.success('评分结果提交成功')
            this.gradeList = []
            this.condition.pageNum = 1
            this.doGetGradeList()
          } else {
            this.$dialog.alert({ message: '评分结果提交失败：' + data[this.$response.MESSAGE] })
          }
        }, errFunc => {
          this.$notify('服务调用失败：' + errFunc.toString())
        })
      } else {
        this.$dialog.alert({
          title: '操作提示',
          message: '请至少选择一个接收人!'
        })
      }
    },
    doQuery (condition) {
      this.condition = condition
      this.condition.user_id = this.$store.state.authInfo.user.userid
      this.condition.department_path = this.$route.query.bmmc != undefined ? this.$route.query.bmmc : this.$store.state.authInfo.currentDept.department_path
      this.condition.problem_type = this.assessType
      this.condition.op = this.operateType
      this.gradeList = []
      this.doGetGradeList()
    },
    doGetGradeList () {
      this.listLoad = true
      this.listError = false
      getGradeList(this.condition).then(res => {
        this.listLoad = false
        let { data } = res
        if (data[this.$response.CODE] === this.$response.SUCCESS) {
          let listData = data[this.$response.DATA].list ? data[this.$response.DATA].list : []
          if (listData.length > 0) {
            // 将返回数据追加到展示列表中
            this.gradeList = this.gradeList.concat(listData)
            // console.log('list', this.gradeList)
            this.problemTotal = data[this.$response.DATA].stat.total
            this.gradeTotal = data[this.$response.DATA].stat.nograde

            // 判断后续是否还有数据
            this.listFinished = this.gradeList.length === data[this.$response.DATA].total

            // 下次查询页增加1
            this.condition.pageNum = this.condition.pageNum + 1
          }
          this.showEmpty = this.gradeList.length === 0
        } else {
          this.$toast.fail('获取数据失败：' + data[this.$response.MESSAGE])
          this.listError = true
        }
      }, errFunc => {
        this.listLoad = false
        this.$notify('服务调用失败：' + errFunc.toString())
        console.log(errFunc.toString())
      })
    }
  }
}
</script>

<style scoped lang="less">
  .page-grade-list{
    /deep/ .card-grade-sketch{
      margin-top: 3px;
    }
    .query-load{
      padding: 10px 0px;
      text-align: center;
    }
    .bottom-action-bar{
      display: flex;
      box-sizing: content-box;
      width: 100%;
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #ffffff;
    }
    .bottom-action-item{
      color: #1989fa;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      .btn-icon{
        position: relative;
        margin-bottom: 5px;
        font-size: 18px;
      }
    }
    .bottom-action-bar::after{
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 16px;
      border-top: 1px solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
  }
</style>
